<!DOCTYPE html>
<html>
<head>
  <style>
    #vis.vega-embed {
      width: 100%;
      display: flex;
    }

    #vis.vega-embed details,
    #vis.vega-embed details summary {
      position: relative;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5.8.0"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    (function(vegaEmbed) {
      var spec = {"config": {"view": {"continuousWidth": 300, "continuousHeight": 300, "strokeOpacity": 0}}, "layer": [{"data": {"name": "data-68d398d281cf624e6dffc0b367dbbdda"}, "mark": {"type": "bar", "size": 40}, "encoding": {"color": {"field": "color", "scale": null, "type": "nominal"}, "x": {"aggregate": "sum", "axis": null, "field": "percentage", "type": "quantitative"}}}, {"data": {"name": "data-b491a34149a769aaf93f1b1b8c1afc50"}, "mark": {"type": "text", "align": "center", "baseline": "middle", "color": "lightgrey", "dx": -30, "fontSize": 20, "fontWeight": "bold"}, "encoding": {"text": {"field": "label", "type": "nominal"}, "x": {"field": "percentage", "type": "quantitative"}}}], "width": 300, "$schema": "https://vega.github.io/schema/vega-lite/v5.8.0.json", "datasets": {"data-68d398d281cf624e6dffc0b367dbbdda": [{"percentage": 0.7, "label": "70%", "color": "#81c01e"}, {"percentage": 0.3, "label": "30%", "color": "lightgray"}], "data-b491a34149a769aaf93f1b1b8c1afc50": [{"percentage": 0.7, "label": "70%", "color": "#81c01e"}]}};
      var embedOpt = {"mode": "vega-lite"};

      function showError(el, error){
          el.innerHTML = ('<div style="color:red;">'
                          + '<p>JavaScript Error: ' + error.message + '</p>'
                          + "<p>This usually means there's a typo in your chart specification. "
                          + "See the javascript console for the full traceback.</p>"
                          + '</div>');
          throw error;
      }
      const el = document.getElementById('vis');
      vegaEmbed("#vis", spec, embedOpt)
        .catch(error => showError(el, error));
    })(vegaEmbed);

  </script>
</body>
</html>